<template>
	<view class="modal-black">
		<u-overlay :show="_isShow" @click="_isShow = false" :opacity="type != 'guide' ? 0.5 : 0">
			<view class="wrap" :class="{
				'fboxWrap Xcenter Ycenter' : type == 'perfect' || type == 'info',
				'fboxCol guide-box' : type == 'guide'
			}">
			<!-- <view class="wrap" :class="type == 'perfect' ? 'fboxWrap Xcenter Ycenter' : 'fboxCol guide-box'"> -->
				<template v-if="type == 'guide'">
					<view class="flex1 bg5"></view>
					<view class="guide bg5 fboxCol Ycenter">
						<view class="btn fboxRow Ycenter Xcenter font32" @click="_isShow = false">知道了</view>
						<view class="tips font32"><text class="mark">点这里，</text>可以在线制作个人简历	</view>
						<view class="arrow"><image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/guide-arrow.png" mode="aspectFill"></image></view>
					</view>
					<image class="block" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/guide-btn.png" mode="aspectFill"></image>
					<view class="bottom bg5"></view>
				</template>
				<template v-if="type == 'perfect'">
					<view class="perfect-box">
						<image class="img" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/index/img-perfect.png" mode="aspectFill"></image>
						<view class="inner">
							<view class="hd fboxRow Xend"><u-icon name="close" size="40rpx" color="#BF8355" @click="_isShow= false"></u-icon></view>
							<view class="bd fboxCol Ycenter">
								<view class="tit font38 fwb">你还未完善简历</view>
								<view class="con lh44 font32">完善简历容易得到HR的青睐，更能 匹配精准岗位</view>
							</view>
							<view class="ft fboxCol Ycenter">
								<view class="btn font28 bg-linear fboxRow Ycenter Xcenter" @tap="goPage('perfect')">去完善简历</view>
							</view>
						</view>
					</view>
				</template>
				<template v-if="type == 'info'">
					<view class="perfect-box">
						<image class="img" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/index/img-perfect.png" mode="aspectFill"></image>
						<view class="inner">
							<view class="hd fboxRow Xend"><u-icon name="close" size="40rpx" color="#BF8355" @click="closeInfo"></u-icon></view>
							<view class="bd fboxCol Ycenter">
								<view class="tit font38 fwb">完善个人信息</view>
								<view class="con lh44 font32">完善信息，结识更多人脉</view>
							</view>
							<view class="ft fboxCol Ycenter">
								<view class="btn font28 bg-linear fboxRow Ycenter Xcenter" @tap="goPage('info')">去完善信息</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		props:{
			show: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'perfect' // guide引导 ｜  perfect 完善简历 ｜ info 完善信息
			}
		},
		computed:{
			_isShow:{
				get(){
					return this.show
				},
				set(val){
					this.$emit('update:show',val)
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			goPage(type){
				this._isShow = false
				if(type == 'perfect'){
					this.$pageTo('/recruit/user/home');
				}else if(type == 'info'){
					getApp().globalData.loginFirst = false
					this.$pageTo('/cardMsg');
				}
			},
			closeInfo(){
				this._isShow = false
				getApp().globalData.loginFirst = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{width: calc(100vw);height: calc(100vh);}
	.guide-box .bg5{background: rgba(0,0,0,.7);}
	.guide-box .guide{}
	.guide-box .btn{width: 180rpx;height: 76rpx;border-radius: 8rpx;border: 2rpx solid #FFFFFF;color: #FFFFFF;}
	.guide-box .arrow{padding: 0 0 0 25%;}
	.guide-box .arrow .icon{width: 92rpx;height: 80rpx}
	.guide-box .tips{margin: 76rpx 0 0;color: #fff;}
	.guide-box .mark{color: #DC9F55;}
	.guide-box .arrow{margin: 24rpx 0;}
	.guide-box .block{height: 102rpx;width: 100%;}
	.guide-box .bottom{height: 44rpx;}
	
	
	.perfect-box{ position: relative;}
	.perfect-box .inner{padding: 0 0 60rpx; width: 560rpx; background-color: #fff;border-radius: 12rpx;overflow: hidden;}
	.perfect-box .img{ position: absolute;top: -94rpx;left: 50%;margin-left: -141rpx; width: 282rpx;height: 270rpx;overflow: hidden;}
	.perfect-box .hd{ padding: 0 26rpx;height: 110rpx;background: linear-gradient(180deg, #B07A52 3%, rgba(206,150,108,0.5006) 43%, rgba(255,255,255,0) 100%);}
	.perfect-box .bd{padding: 174rpx 26rpx 0;}
	.perfect-box .bd .tit{line-height: 56rpx;}
	.perfect-box .bd .con{padding: 32rpx 0 0;text-align: center;color:var(--contentFontLightColor)}
	.perfect-box .ft{padding: 70rpx 0 0;}
	.perfect-box .btn{width: 360rpx;height: 72rpx;border-radius: 8rpx}
</style>
